<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.div1 {
			background: #000080;
			border: 1px solid red;
			margin-bottom: 10px;
			zoom: 1
		}
		
		.div2 {
			background: #800080;
			border: 1px solid red;
			height: 100px
		}
		
		.left {
			float: left;
			width: 20%;
			height: 200px;
			background: #DDD
		}
		
		.right {
			float: right;
			width: 30%;
			height: 80px;
			background: #DDD
		}
		
		.clearfloat {
			clear: both
		}
	</style>

	<body>
		<div class="div1">
			<div class="left">Left</div>
			<div class="right">Right</div>
			<br class="clearfloat" />
		</div>
		<div class="div2">
			div2
		</div>
	</body>
	8，结尾处加 br标签 clear:both
原理：父级div定义zoom:1来解决IE浮动问题，结尾处加 br标签 clear:both 

建议：不推荐使用，只作了解。
</html>